<template>
  <div class="leader-care-content">
    <a class="leader-enter-detail" :href="article.linkUrl"></a>
    <el-row>
      <el-col :lg="1" :md="1" :sm="1"><div style="opacity:0">1</div></el-col>
      <el-col :lg="5" :md="5" :sm="5">
        <img
          :src="article.coverImgUrl"
          width="100%"
          alt=""
        />
      </el-col>
      <el-col :lg="1" :md="1" :sm="1"><div style="opacity:0">1</div></el-col>
      <el-col :lg="16" :md="16" :sm="16" class="leaderCareArticle">
        <h2>{{article.title}}</h2>
        <p class="expert-base-info">
          <span>{{article.authorName}}</span>
          <span>{{article.gmtCreated}}</span>
        </p>
        <p class="article-content">
          {{article.description}}
        </p>
      </el-col>
      <el-col :lg="1" :md="1" :sm="1"><div style="opacity:0">1</div></el-col>
    </el-row>
    <div class="artcle-bottom"></div>
  </div>
</template>

<script>
export default {
  props:{
    article:{
      type: Object,
      default() {
        return {};
      },
    }
  },
  data() {
    return {};
  },
  methods:{
    enterLeaderDetail() {
      this.$router.push("/centerHome/leaderCareInfo")
    }
  }
};
</script>

<style scoped>
.leader-care-content {
  position: relative;
}
.leaderCareArticle h2 {
  font-size: 18px;
  font-weight: 500;
}
.leaderCareArticle .expert-base-info {
  line-height: 40px;
  font-size: 14px;
  color: #909090;
}
.leaderCareArticle .expert-base-info :nth-child(1) {
  margin-right: 30px;
}
.leaderCareArticle .article-content {
  font-size: 13px;
  word-wrap: break-word;
  line-height: 22px;
  color: #909090;
}
.artcle-bottom {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 20px 0px;
}
.leader-enter-detail {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 999;
}
@media screen and (max-width: 768px) {
  img {
    padding-left: 0px;
  }
  .article-content {
    display: none;
  }
  .leaderCareArticle h2 {
    font-size: 16px;
  }
  .expert-base-info :nth-child(1) {
    display: none;
  }
  .expert-base-info {
    margin-top: 10px;
  }
  .artcle-bottom {
    display: none;
  }
  .leaderCareArticle .expert-base-info {
    line-height: 20px;
  }
}
</style>
